background屬性是用來聲明元素的背景，它可以大到網頁整個背景，也可以設定一個一個區塊的背景，或是小到像<button>、<a>都可以使用background屬性來聲明背景樣式。背景可以填單色，也可以做漸層色，或是引入一張圖片來當背景。它們各自有其相應的屬性及屬性值(參數)：

background-color

單色的背景，可以用各種色碼作為屬性值。

body {
     background-color: #eded89;
 }

 .container {
     width: 500px;
     height: 300px;
     background-color: hsla(240, 60%, 60%, .5);
 }

 .block1 {
     width: 200px;
     height: 100px;
     background-color: rgb(180, 256 ,0);
 }

 .block2 {
     width: 200px;
     height: 100px;
     background-color: rgba(180, 256 ,0, .5);
 }

background-image

• url()引入圖片當背景，括弧內寫入相對定位或絕對定位值。

  body {
        background-image: url(./image/cloud.png);
  }
  

  

  圖片的大小是225*225px，它會自己去填滿body的寬高。（因為background-repeat的預設值是repeat。）

• linear-gradient用漸層設背景
  linear-gradient的語法是：linear-gradius(degree, color)
  degree是gradient軸的角度，與它垂直的兩端是起點顏色與終點顏色。（該圖擷取自MDN)
  
  gradient軸的角度是從下方開始算的，所以0deg的顏色起始點是下方，終點是上方 ; 90deg起點是左方，終點是右方 ; 180deg起始是上方，終點是下方 ; 270deg起始是右方，終點是左方。360deg回到0deg的方向。
  

  div {
       width: 300px;
       height: 100px;
  }
  .block1 {
       background-image: linear-gradient( 0deg , green, yellow);
  }
  .block2 {
       background-image: linear-gradient( 270deg, green, yellow);
  }
  .block3 {
        background-image: linear-gradient( 150deg, green, yellow);
  }
  

  

  點看更多的linear-gradient屬性值。

background-repeat

用來聲明背景圖片是否重複、如何重複顯示。

• repeat(預設值)

  body {
      background-image: url(./image/cloud.png);
      background-repeat: repeat;
  }
  

  

• no-repeat

  body {
      background-color: #fff8d8;
      background-image: url(./image/cloud.png);
      background-repeat: no-repeat;
  }
  

  

  點看更多background-repeat。

background-size

用來聲明背景圖片的大小。

• contain
  contain值是不超過原圖的大小這個前提下，等比縮小到符合，不加以裁切或伸展，通常用在圖比容器大的背景聲明裡。以下面的例子來說，圖片是1000*677，而元素空間是300*200，為了不裁切到圖片，圖片會等比縮到約299*200。

  div {
      width: 100%;
      height: 300px;
      background-image: url(./image/cloud.png);
      background-size: contain;
  }
  

  

- `cover`
cover值是等比例縮放，讓圖片可以蓋滿元素寬高，若因為比例與元素不均等，導致寬度或高度超過，就會裁切。以同樣的圖片為例，圖片是1000\*677，`<div>`佔滿瀏覽器寬度約1280。圖片為了蓋滿寬高，會等比放大成約1280\*866的大小，高度高過300px的部分都會被裁切掉。
  ```css=
  div {
      height: 300px;
      background-image: url(./image/cloud.png);
      background-size: cover;
  }
  ```
  ![](https://i.imgur.com/A6qkwCx.png)
  
- `單位與數值`
    也可以用單位與數值來設定背景圖片的大小。它可以只設定寬，並讓高自動符合比例 ; 或是反過來 ; 或是寬高都設值，如此一來圖片將失去本來的比例，導致失真。
    ```css=
    body {
      width: 100%;
      height: 300px;
      background-image: url(./image/cloud.png);
      background-size: 50% 200px;
    }
    ```
    ![](https://i.imgur.com/2rRuIvH.png)

今天的筆記到這，下集待續。明天見～

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。